<template>
  <div>
    <a-modal
      style="width: 50%"
      v-bind:open="isModalVisible"
      :title="modaltitle"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form
        ref="formRefLine"
        :model="formInline"
        style="display: flex; justify-content: space-between"
      >
        <a-form-item label="用户账号:">
          <a-input
            v-model="formInline.zhuanghao"
            placeholder="请输入"
            clearable
          />
        </a-form-item>
        <a-form-item label="用户姓名：">
          <a-input v-model="formInline.name" placeholder="请输入" clearable />
        </a-form-item>

        <a-form-item style="margin-right: 0px">
          <div style="width: 100%; display: flex; justify-content: right">
            <a-button type="primary" @click="search" style="margin-right: 20px">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button @click="reset">重置</a-button>
          </div>
        </a-form-item>
      </a-form>
      <!-- <a-table :columns="columns" :dataSource="data" /> -->
      <MyTable :columns="columns" :tableData="data"></MyTable>
    </a-modal>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { Modal, Table, Button } from 'ant-design-vue'
  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
  import { defineProps, defineEmits } from 'vue'

  //父组件传过来的数据
  const props = defineProps({
    isModalVisible: {
      typeof: Boolean,
    },
    modaltitle: {
      type: String,
    },
    tabledataList: [],
  })
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  const formInline = ref({})

  const data = ref([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    // ...更多数据
  ])
  const isModalVisibleBool = ref(true)
  const showModal = () => {
    props.isModalVisible = true
  }

  const handleOk = () => {
    // props.isModalVisible = false;
    emitModal('ok',111111)
  }

  const emitModal = defineEmits(['cancel', 'ok'])
  const handleCancel = () => {
    // props.isModalVisible = false;
    emitModal('cancel')
  }
</script>
